<template>
  <view class="main">
    <!-- <Header v-show="showHeader" /> -->
    <Header v-model:value="showHeader">
      <view class="search" />
    </Header>
    <scroll-view class="scroll-view" scroll-y @scroll="onScroll">
      <image
        v-for="i in 100"
        class="logo"
        mode="widthFix"
        src="/static/logo.png"
      />
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import Header from '@/components/Header/index.vue'
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { useGlobalStore } from '@/store'

const globalData = useGlobalStore()

// import { globalData } from '@/utils/type'
// const app = getApp().globalData as globalData

const showHeader = ref(false)

const onScroll = (e: any) => {
  if (e.detail.scrollTop > 100) {
    showHeader.value = true
  } else {
    showHeader.value = false
  }
}

onShow(() => {
  showHeader.value = globalData.showHeader
})

onHide(() => {
  globalData.checkShowHeader(showHeader.value)
})

onMounted(() => {})
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .search {
    width: 90%;
    height: 80%;
    margin-left: 40rpx;
    background-color: var(--color-background-search);
  }
  .scroll-view {
    width: 100%;
    height: 100vh;
  }
  .logo-title {
    display: flex;
    align-items: center;
  }
}
</style>
